jss-nested

What is jss-nested?

The jss-nested package is a plugin for JSS (JavaScript Style Sheets) that allows you to use nested selectors in your styles. This makes it easier to write and manage complex styles by mimicking the nesting capabilities found in preprocessors like Sass and Less.

What are jss-nested's main functionalities?

Nested Selectors

This feature allows you to nest selectors within a style rule, making it easier to manage styles that depend on parent elements or states like hover.

const styles = {
  button: {
    '&:hover': {
      backgroundColor: 'blue'
    },
    '& .icon': {
      color: 'red'
    }
  }
};

Media Queries

You can nest media queries within your style rules, allowing for responsive design directly within your JSS styles.

const styles = {
  container: {
    width: '100%',
    '@media (min-width: 600px)': {
      width: '50%'
    }
  }
};

Nested Conditional Styles

This feature allows you to apply different styles based on class names or other conditions, making it easier to manage variations of a component.

const styles = {
  button: {
    color: 'black',
    '&.primary': {
      color: 'blue'
    },
    '&.secondary': {
      color: 'green'
    }
  }
};

Other packages similar to jss-nested

styled-components

styled-components is a library for React and React Native that allows you to use component-level styles in your application. It uses tagged template literals to style your components. Unlike jss-nested, styled-components is more focused on React and offers a more integrated approach to styling components.

emotion

Emotion is a performant and flexible CSS-in-JS library. It allows you to style applications quickly with string or object styles. Emotion also supports nested selectors and media queries, similar to jss-nested, but it offers a broader range of features and better performance optimizations.

aphrodite

Aphrodite is a CSS-in-JS library that allows you to write styles in JavaScript and apply them to your components. It supports media queries and pseudo-classes, similar to jss-nested, but it focuses more on performance and critical CSS extraction.

README

JSS plugin that enables support for nested selectors

Put an & before a selector within a rule and it will be replaced by the parent selector and extracted to a separate rule.

Demo - JSS


Usage example

import jss from 'jss'
import nested from 'jss-nested'

jss.use(nested())

const sheet = jss.createStyleSheet({
  container: {
    padding: '20px',
    '&:hover': {
      background: 'blue'
    },
    '&.clear': {
      clear: 'both'
    },
    '& .button': {
      background: 'red'
    },
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
})

console.log(sheet.toString())

.jss-0-0 {
  padding: 20px;
}
.jss-0-0:hover {
  background: blue;
}
.jss-0-0.clear {
  clear: both;
}
.jss-0-0 .button {
  background: red;
}
.jss-0-0.selected, .jss-0-0.active {
  border: 1px solid red;
}

console.log(sheet.classes)

{ container: "jss-0-0" }

Issues

File a bug against jsstyles/jss prefixed with [jss-nested].

Run tests

npm i
npm run test

License

MIT